<template>
    <div class="collapse">
        <template v-if="!sNoData">
            <el-collapse
                accordion
                v-model="activeNames"
                @change="collapseClick"
            >
                <el-collapse-item
                    :name="index"
                    v-for="(item, index) in showSectionList"
                    :key="index"
                >
                    <template slot="title">
                        <div class="layui-colla-title">
                            <div class="layui-colla-title-left">
                                {{ item.section_name }}
                            </div>
                            <!-- <div class="layui-colla-title-right">
                                共{{ secondSectionList.length }}个试题
                            </div> -->
                        </div>
                    </template>
                    <template v-if="showIndex == index + 1 || showIndex == 1">
                        <template v-if="!ssNoData">
                            <div
                                class="layui-show-item"
                                v-for="(item1, index1) in secondSectionList"
                                :key="index1"
                            >
                                <div class="layui-show-item-left">
                                    <div class="layui-show-item-left-text">
                                        {{ item1.section_name }}
                                    </div>
                                    <template v-if="item1.practice_id">
                                        <div
                                            class="layui-show-item-left-button1"
                                            @click="
                                                continuePractice(
                                                    item1,
                                                    item.section_name
                                                )
                                            "
                                        >
                                            继续练习
                                        </div>
                                    </template>
                                    <template v-else>
                                        <div
                                            class="layui-show-item-left-button"
                                            @click="
                                                goPractice(
                                                    item1,
                                                    item.section_name
                                                )
                                            "
                                        >
                                            去练习
                                        </div>
                                    </template>
                                </div>
                            </div>
                            <template v-if="ssTotal > pagesize">
                                <template v-if="ssLastPage > ssPage">
                                    <div
                                        class="loadmore"
                                        @click="loadMore(index)"
                                    >
                                        加载更多
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="loadmore">已经没有更多了~</div>
                                </template>
                            </template>
                        </template>
                    </template>
                </el-collapse-item>
            </el-collapse>
            <div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="sCurrentPage"
                    background
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="sTotal"
                    :hide-on-single-page="true"
                >
                </el-pagination>
            </div>
        </template>
        <template v-else>
            <tips :tipsText="'该科目还没有章节'"></tips>
        </template>
    </div>
</template>

<script>
import tips from "@/components/tips/index";
export default {
    components: {
        tips
    },
    props: {
        showSectionList: {
            type: Array
        },
        secondSectionList: {
            type: Array
        },
        showIndex: {
            type: Number
        },
        sNoData: {
            type: Boolean
        },
        ssNoData: {
            type: Boolean
        },
        sTotal: {
            type: Number
        },
        ssTotal: {
            type: Number
        },
        sid: {
            type: Number
        },
        ssLastPage: {
            type: Number
        }
    },
    data() {
        return {
            sCurrentPage: 1,
            ssPage: 1,
            activeNames: 0, //手风琴默认展开
            pagesize: 8 //    每页的数据
        };
    },
    computed: {},
    watch: {
        sid(newValue) {
            if (newValue) {
                this.$nextTick(function() {
                    this.sCurrentPage = 1;
                    this.activeNames = 0;
                });
            }
        }
    },
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
    },
    methods: {
        collapseClick(index) {
            if (index !== "") {
                this.ssPage = 1;
                this.$emit(
                    "getSectionList",
                    2,
                    this.showSectionList[index].zid,
                    index + 1
                );
            }
        },
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function(size) {
            this.pagesize = size;
            console.log(this.pagesize); //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage) {
            this.sCurrentPage = currentPage;
            this.activeNames = 0;
            this.$emit("getSectionList", 1, "", 1, "", currentPage);
        },
        loadMore(index) {
            this.ssPage++;
            this.$emit(
                "getSectionList",
                2,
                this.showSectionList[index].zid,
                index + 1,
                "",
                "",
                this.ssPage
            );
        },
        // 继续练习
        continuePractice(item, title) {
            this.$router.push({
                path: "/synchronization/startPracticing/index",
                query: {
                    sid: this.sid,
                    zid: item.zid,
                    fid: item.fid,
                    practice_id: item.practice_id,
                    practice_lists_count: item.practice_lists_count,
                    section_name: item.section_name,
                    title: title
                }
            });
        },
        // 去练习
        goPractice(item, title) {
            this.$router.push({
                path: "/synchronization/startPracticing/index",
                query: {
                    sid: this.sid,
                    zid: item.zid,
                    fid: item.fid,
                    practice_id: 0,
                    section_name: item.section_name,
                    title: title
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.collapse {
    flex-grow: 1;
    .layui-colla-title {
        display: flex;
        justify-content: space-between;
        color: #2d3440;
        font-weight: 500;
        width: 100%;
        padding: 0px 15px 0px 20px;
    }
    .layui-colla-title-left {
        font-size: 16px;
    }
    .layui-show {
        background: #fff;
        padding: 0px;
    }
    .loadmore {
        padding: 18px 0;
        margin: 0 auto;
        width: 96%;
        text-align: center;
        font-size: 16px;
    }
    .layui-show-item {
        padding: 18px 0px;
        width: 96%;
        margin: 0 auto;
        box-sizing: border-box;
        border-bottom: 1px solid #dadfe6;
        display: flex;
        justify-content: space-between;
        &:last-child {
            border: none;
        }
        .layui-show-item-left {
            display: flex;
            align-items: center;
            width: 98%;
            margin-left: 10px;
            justify-content: space-between;
            .layui-show-item-left-button {
                padding: 3px 8px;
                border-radius: 15px;
                color: white;
                background: #018854;
                margin-left: 20px;
                cursor: pointer;
            }
            .layui-show-item-left-button1 {
                padding: 3px 8px;
                border-radius: 15px;
                color: white;
                background: #ff7171;
                margin-left: 20px;
                cursor: pointer;
            }
        }
    }
}
.pagination {
    padding: 20px 0px;
    .el-pagination {
        text-align: center;
    }
}
</style>
